<template>
  <div style="height: calc(100vh - 100px); overflow: auto">
    <el-scrollbar style="height: 100%">
      <el-row :gutter="10">
        <el-col class="hidden-md-and-down" :lg="3" :xl="5"
          ><div class="grid-content bg-purple vh-height"></div
        ></el-col>
        <el-col :lg="18" :xl="14">
          <div class="grid-content bg-purple vh-height article-container">
            <section class="article-main">
              <h1 class="title">{{ article.title }}</h1>
              <div class="info-container">
                <div class="info">
                  <el-avatar :src="headImg" class="head-img"></el-avatar>
                  <div>
                    <div class="_3U4Smb">
                      <span class="FxYr8x">凉二爸爸</span>
                    </div>
                    <div class="s-dsoj">
                      <span class="date">{{ article.createTime }}</span>
                      <span
                        ><i class="el-icon-view"></i>
                        {{ article.readNum }}</span
                      >
                    </div>
                  </div>
                </div>
                <a class="_1NDgW7 _1OhGeD" href="javascript:void(0);"
                  >编辑文章</a
                >
              </div>
              <ArticleContent
                v-bind:content="article.contentPublish"
              ></ArticleContent>
            </section>
            <!-- 评论相关 start -->
            <div class="note-page-comment">
              <section class="ouvJEz">
                <!-- 发表评论 start -->
                <div class="_26JdYM">
                  <div class="_3GKFE3">
                    <textarea
                      class="_1u_H4i"
                      placeholder="写下你的评论..."
                    ></textarea>
                    <div></div>
                  </div>
                </div>
                <!-- 发表评论 end -->
                <!-- 评论表头 start -->
                <h3 class="QxT4hD">
                  <div class="_10KzV0">
                    <span>全部评论</span><span class="_2R7vBo">22</span
                    ><span
                      class="_1DVmvZ"
                      role="checkbox"
                      tabindex="0"
                      aria-label="只看作者"
                      aria-checked="false"
                      >只看作者</span
                    >
                  </div>
                  <div class="_2zSaYx">
                    <div class="_1ekjko _1BIpxf" role="button" tabindex="-1">
                      按时间倒序
                    </div>
                    <div class="_1ekjko" role="button" tabindex="-1">
                      按时间正序
                    </div>
                  </div>
                </h3>
                <!-- 评论表头 end -->
                <!-- 评论列表 start -->
                <div class="_2gPNSa">
                  <div class="_2IUqvs">
                    <div class="_1K9gkf">
                      <!-- 评论昵称 start -->
                      <div class="_23G05g">
                        <a
                          class="_1OhGeD"
                          href="javascript:void(0);"
                          rel="noopener noreferrer"
                          >柒里夜</a
                        >
                      </div>
                      <!-- 评论昵称 end -->
                      <!-- 评论时间 -->
                      <div class="_1xqkrI">
                        <span>21楼 </span
                        ><time datetime="2019-09-25T07:51:50.000Z"
                          >2019.09.25 15:51</time
                        >
                      </div>
                      <!-- 评论时间 end -->
                      <!-- 评论内容 -->
                      <div class="_2bDGm4">
                        使用简书时间不长，不论如何站队，能输出优质内容的博主才是我们需要的，无论阵地在哪都要向你们学习。
                      </div>
                      <!-- 评论内容 end -->
                      <!-- 评论 赞 回复  -->
                      <div class="_2ti5br">
                        <div class="_3MyyYc">
                          <span
                            class="_2GXD2V _1Jvkh4"
                            role="button"
                            tabindex="-1"
                            aria-label="点赞"
                            ><i class="el-icon-edit"></i>赞
                          </span>
                          <span
                            class="_2GXD2V _1Jvkh4"
                            role="button"
                            tabindex="-1"
                            aria-label="点赞"
                            ><i class="el-icon-chat-square"></i>回复
                          </span>
                        </div>
                      </div>
                      <!-- 评论 赞 回复 end -->
                      <!-- 评论 回复列表 start -->
                      <div class="_2kvBge">
                        <div class="_3g0yKR">
                          <!-- 评论人 及时间 -->
                          <div class="_3d_vFY">
                            <div style="margin-left: 10px">
                              <div class="_23G05g">
                                <a
                                  class="_1OhGeD"
                                  href="javascript:void(0);"
                                  rel="noopener noreferrer"
                                  >墨影_0620</a
                                >
                              </div>
                              <div class="_1xqkrI">
                                <time datetime="2018-09-07T04:49:44.000Z"
                                  >2018.09.07 12:49</time
                                >
                              </div>
                            </div>
                          </div>
                          <!-- 评论人 及时间 end -->
                          <!-- 回复内容 -->
                          <div class="_2bDGm4">
                            <a
                              href="javascript:void(0);"
                              class="maleskine-author"
                              data-user-slug="fa5525d80730"
                              >@JakerMan</a
                            >
                            对啊！对我来说就是一个发发牢骚或者做软件用的平台还有分享教程给我的用户看。至于看文章什么的，我基本上都不从简书看。偶尔看看也是闲的没事。
                          </div>
                          <!-- 回复内容 end -->
                          <!-- 回复 -->
                          <div class="_2ti5br">
                            <div class="_3MyyYc">
                              <span
                                class="_2GXD2V _1Jvkh4"
                                role="button"
                                tabindex="-1"
                                aria-label="点赞"
                                ><i class="el-icon-chat-square"></i>回复
                              </span>
                            </div>
                          </div>
                          <!-- 回复 end -->
                        </div>
                      </div>
                      <!-- 评论 回复列表 end -->
                    </div>
                  </div>
                </div>
                <!-- 评论列表 end -->
                <!-- 分页 -->
                <el-pagination small layout="prev, pager, next" :total="50">
                </el-pagination>
                <!-- 分页 end -->
              </section>
            </div>
            <!-- 评论相关 end -->
          </div>
        </el-col>
        <el-col class="hidden-md-and-down" :lg="3" :xl="5"
          ><div class="grid-content bg-purple vh-height"></div
        ></el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>
<script>
import ArticleContent from "../components/ArticleContent";
export default {
  components: {
    ArticleContent,
  },
  data() {
    return {
      headImg: require("../assets/blogHead.webp"),
      article: {
        contentPublish: "",
      },
    };
  },
  props: {
    id: String,
  },
  methods: {
    loadArticle() {
      this.$http({
        url: "/blogbackend/article/loadArticle",
        method: "get",
        params: { id: this.id },
      }).then((response) => (this.article = response.data.data));
    },
  },
  mounted() {
    this.loadArticle();
  },
};
</script>
<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.is-horizontal {
  display: none;
}
.vh-height {
  min-height: calc(100vh - 100px);
}
.article-container {
  text-align: left;
  background-color: #fff;
}
.info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  font-size: 13px;
}
.info {
  display: flex;
  align-items: center;
}
.head-img {
  display: block;
  border-radius: 50%;
  border: 1px solid #eee;
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
}
._3U4Smb {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.FxYr8x {
  font-size: 16px;
  font-weight: 500;
  margin-right: 8px;
  color: #404040 !important;
}
.s-dsoj {
  display: flex;
  color: #969696;
}
._1NDgW7 {
  color: #969696;
  flex-shrink: 0;
}
.article-main {
  padding: 32px;
}
.article-main .info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  font-size: 13px;
}
.article-main .info {
  display: flex;
  align-items: center;
}
.info span {
  color: #969696;
  margin-right: 10px;
}
.article-main .title {
  font-size: 30px;
  font-weight: 700;
  word-break: break-word;
  margin-bottom: 0.5em;
}

/* 评论区-发表评论 */
.ouvJEz {
  padding: 32px;
}
._26JdYM {
  display: flex;
}
._26JdYM ._3GKFE3 {
  margin-top: 0;
  margin-bottom: 48px;
}
._3GKFE3 {
  flex-grow: 1;
  margin-top: 16px;
}
._1u_H4i {
  padding: 12px 16px;
  width: 97%;
  height: 90px;
  font-size: 13px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fafafa;
  resize: none;
  display: inline-block;
  vertical-align: top;
  outline-style: none;
}

/* 评论列表 头 */
.QxT4hD {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid #ec7259;
  font-size: 18px;
  font-weight: 500;
  height: 20px;
  line-height: 20px;
}
._10KzV0 {
  display: flex;
  align-items: center;
}
._10KzV0 ._2R7vBo {
  margin-left: 6px;
  font-size: 14px;
  font-weight: normal;
}
._1DVmvZ {
  font-size: 12px;
  font-weight: normal;
  color: #969696;
  margin-left: 12px;
  padding: 2px 8px;
  border: 1px solid #eee;
  border-radius: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
._2zSaYx {
  display: flex;
}
._1ekjko._1BIpxf {
  color: #2d2d2d;
}
._1ekjko {
  font-size: 14px;
  font-weight: normal;
  color: #969696;
  margin-left: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 评论列表 */
._2IUqvs {
  display: flex;
  align-items: flex-start;
}
._1K9gkf {
  flex-grow: 1;
  margin-left: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}
._23G05g {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}
._1OhGeD,
._1OhGeD:active,
._1OhGeD:hover {
  color: inherit;
}
._1xqkrI {
  margin-top: 2px;
  font-size: 12px;
  color: #969696;
}
._2bDGm4 {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  word-break: break-word;
}
._2ti5br {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
._3MyyYc {
  display: block;
}
._1Jvkh4 {
  cursor: pointer;
  margin-right: 16px;
  color: #b0b0b0;
}
/* 评论的回复 */
._2kvBge {
  margin-top: 20px;
}
._3g0yKR:last-child {
  padding-bottom: 0;
}
._3g0yKR {
  padding: 20px 0 16px;
  border-top: 1px solid #eee;
}
._3g0yKR ._3d_vFY {
  display: flex;
}
</style>